<template>
    <view class="container paddingBottomBar" :style="themeColor">
        <view class="header-bg"></view>
        <view class="main">
            <view class="delivery-mode">
                <view class="tab" v-if="deliveryWays.length > 1">
                    <view
                        class="tab-item"
                        @click="selectDeliveryWay = item.id"
                        :class="selectDeliveryWay == item.id ? 'current' : ''"
                        v-for="(item, index) in deliveryWays"
                        :key="index">
                        <image
                            v-show="selectDeliveryWay == item.id && index != 0"
                            class="tab-bg-right"
                            src="/static/img/tab_bg_right@2x.png"></image>
                        <text>{{ item.name }}</text>
                        <image
                            v-show="selectDeliveryWay == item.id && index != deliveryWays.length - 1"
                            class="tab-bg-left"
                            src="/static/img/tab_bg_left@2x.png"></image>
                    </view>
                    <view class="bg"></view>
                </view>
                <view v-else class="tab-mark"></view>
                <view class="delivery-mode-main" @click="goSelectAddress">
                    <view class="location-icon" v-if="false">
                        <uni-icons type="location-filled" customIcons="icon-white"></uni-icons>
                    </view>
                    <view class="info" v-if="getUseAddress">
                        <view class="info-name">
                            <text>{{ getUseAddress.ContactName }} {{ getUseAddress.ContactTel }}</text>
                        </view>
                        <view class="location">
                            <text class="location-text"
                                >{{ getUseAddress.ProvinceName ? getUseAddress.ProvinceName : ""
                                }}{{ getUseAddress.CityName ? getUseAddress.CityName : ""
                                }}{{ getUseAddress.AreaName ? getUseAddress.AreaName : ""
                                }}{{ getUseAddress.StreetName ? getUseAddress.StreetName : ""
                                }}{{ getUseAddress.ContactAddress ? getUseAddress.ContactAddress : "" }}</text
                            >
                            <uni-icons type="arrowright"></uni-icons>
                        </view>
                    </view>
                    <view class="info" v-else>
                        <view class="add-location">
                            <text class="location-text">+点击选择地址</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-item product-item">
                <text class="title-text">订购商品</text>
                <view class="pro-list-item" v-if="proData">
                    <image class="pro-image" :src="easyGetImgUrl(proData.SkuImg)"></image>
                    <view class="pro-info">
                        <text class="pro-info-name">{{ proData.ProductName }}</text>
                        <text class="pro-info-desc" v-if="proData.AttributeNameValue">{{
                            proData.AttributeNameValue
                        }}</text>
                        <view class="pro-info-price">
                            <text class="small">￥</text>
                            <text class="price-text">{{ proData.activityPrice }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <submit-bottom-bar
                @action="action"
                :useAddress="getUseAddress"
                :payList="payList"
                :postPrice="postPrice"
                :payPrice="payPrice">
            </submit-bottom-bar>
        </view>
    </view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex"
import submitBottomBar from "@/pages_shop/components/accumulate/submit-bottom-bar.vue"
import { CreateAddupActivityAction } from "@/service/api/activity.js"
import { getReceivingAddressList, StatisPostageMoneyByUserCar } from "@/service/api/member.js"
import { getList } from "@/service/api/businessPay.js"
import storage from "@/uni-sub-base/utils/storage.js"
import { offlinePay } from "@/service/api/order.js"
import { getUserInfo } from "@/utils/appInit.js"
export default {
    components: {
        submitBottomBar,
    },
    data() {
        return {
            selectDeliveryWay: "1",
            deliveryWays: [
                {
                    id: "1",
                    name: "快递物流",
                },
                {
                    id: "2",
                    name: "商家配送",
                },
            ],
            ids: "",
            data: null,
            payList: [],
            addressData: [],
            useAddress: null,
            param: {},
            isFrist: true,
            isLoading: false,
            isCar: true,
            postPrice: 0,
            isTempCar: false,
            remark: "",
            tabIndex: 0,
            imgs: [],
            showImgs: [],
            classNum: 0,
            payPrice: null,
            useCoupon: null,
            isShowCouponTip: false,
            proData: null,
        }
    },
    watch: {
        getUseAddress(e) {
            this.getPostage()
        },
    },
    computed: {
        ...mapGetters(["getUseAddress"]),
    },
    onLoad(e) {
        this.proData = JSON.parse(decodeURIComponent(e.proData))
        this.payPrice = this.proData.activityPrice
    },

    mounted() {
        let userId = storage.getCache("userInfo").UserId
        if (!this.isTempCar) {
            this.param = {
                carUserId: userId,
                carIds: this.ids,
                isTempCar: false,
                orderPolicy: {
                    carPolicyList: [],
                    orderGiftList: [],
                },
                infoType: 0,
                orderType: 4,
            }
        } else {
            this.param = {
                carUserId: userId,
                orderPolicy: {
                    carPolicyList: [],
                    orderGiftList: [],
                },
                infoType: 0,
                orderType: 4,
                isTempCar: true,
            }
        }
        this.getAddress()
        this.getPayList()
    },
    methods: {
        ...mapMutations(["SET_USE_ADDRESS"]),
        getPostage() {
            if (this.getUseAddress) {
                let path = `?car_ids=${this.ids}&province_id=${this.getUseAddress.ProvinceId}&city_id=${this.getUseAddress.CityId}&area_id=${this.getUseAddress.AreaId}&postage_temp_id=0`
                let param = {
                    carIds: this.ids ? this.ids : "",
                    provinceId: this.getUseAddress.ProvinceId,
                    cityId: this.getUseAddress.CityId,
                    areaId: this.getUseAddress.AreaId,
                    isTempCar: this.isTempCar,
                }
                StatisPostageMoneyByUserCar(param, path).then((res) => {
                    if (res.State && res.Data) {
                        this.postPrice = res.Data.Value
                    }
                })
            }
        },
        goSelectAddress() {
            let path = this.getUseAddress ? this.getUseAddress.ID : 0
            this.easyGoTo("/pages_me/packet/address/index?from=select&selectId=" + path)
        },
        change(id) {
            this.selectDeliveryWay = id
        },
        getData() {
            this.isLoading = true
            getProductDataBySubmit(this.param).then((res) => {
                if (res.Data && res.Data.List) {
                    this.data = res.Data
                    if (this.isFrist) {
                        this.data.List.forEach((e) => {
                            e.CarList.forEach((car) => {
                                let obj = {
                                    CarId: car.ID,
                                    PolicyId: e.PolicyId,
                                }
                                this.param.orderPolicy.carPolicyList.push(obj)
                            })
                        })
                        this.isFrist = false
                    }
                    if (!this.ids) {
                        let ids = ""
                        this.param.orderPolicy.carPolicyList.forEach((e) => {
                            ids = ids + e.CarId + ","
                        })
                        this.ids = ids
                        this.ids = this.ids.slice(0, this.ids.length - 1)
                    }
                    this.getImageList(this.data.List)
                    this.getPostage()

                    if (this.data.CouponList && this.data.CouponList.length > 0) {
                        this.useCoupon = this.data.CouponList[0]
                    }
                }
                this.isLoading = false
            })
        },
        //获取收货地址
        getAddress() {
            let param = {
                searchKey: "",
            }
            getReceivingAddressList(param).then((res) => {
                if (res.Data && res.Data.length > 0) {
                    let hasDefalut = false
                    res.Data.forEach((e) => {
                        if (e.IsDefault) {
                            hasDefalut = true
                            this.SET_USE_ADDRESS(e)
                        }
                    })
                    if (!hasDefalut) {
                        this.SET_USE_ADDRESS(res.Data[0])
                    }
                } else {
                    //还没有设置地址
                    this.SET_USE_ADDRESS(null)
                }
            })
            // this.getPostage()
        },
        //获取支付方式
        getPayList() {
            let param = {}
            getList(param).then((res) => {
                //屏蔽线下支付
                let arr = res.Data.filter((e) => {
                    return e.PaymentPayWay != 0
                })
                this.payList = arr
            })
        },
        //更新选择优惠
        changePolicy(item) {
            let hasIn = false
            let carPolicyList = this.param.orderPolicy.carPolicyList

            if (carPolicyList.length > 0) {
                carPolicyList.forEach((e) => {
                    if (e.CarId == item.CarId) {
                        hasIn = true
                        e.PolicyId = item.PolicyId
                    }
                })
            }
            if (!hasIn) {
                carPolicyList.push(item)
            }
            this.getData()
        },
        getImageList(list) {
            let arr = []
            if (list) {
                list.forEach((e) => {
                    if (e.CarList) {
                        e.CarList.forEach((item) => {
                            arr.push(item.V_ThumbnailUrl160)
                        })
                    }
                })
            }
            this.imgs = arr
            this.showImgs = arr.slice(0, 3)
        },
        getTotalNum() {
            let num = 0
            let allClass = []
            this.data.List.forEach((e) => {
                if (e.CarList) {
                    e.CarList.forEach((item) => {
                        num += item.Amount
                        if (!allClass.includes(item.ProductId)) {
                            allClass.push(item.ProductId)
                        }
                    })
                }
            })

            this.$nextTick(() => {
                this.classNum = allClass.length
            })
            return num
        },
        payPriceFn(price) {
            this.payPrice = price
            this.$forceUpdate()
        },
        useCouponFn(useCoupon) {
            this.useCoupon = useCoupon
            this.$forceUpdate()
        },
        goSelectCouponFn() {
            let id = ""
            if (this.useCoupon) {
                id = String(this.useCoupon.ID)
            }
            uni.navigateTo({
                url:
                    "/pages_me/packet/coupon/select?id=" +
                    id +
                    "&coupons=" +
                    encodeURIComponent(JSON.stringify(this.data.CouponList)),
                events: {
                    selectEvent: (data) => {
                        this.useCoupon = data
                    },
                },
            })
        },
        getCouponPrice(coupon) {
            let price = 0
            if (coupon.V_PrivilegeWay == 0) {
                //算折扣
                price = this.payPrice
            } else {
                //抵用
                price = coupon.CouponPrivilegeValue
            }
            return price
        },
        action(e) {
            let param = {
                productId: this.proData.ProductId,
                skuId: this.proData.ID,
                addressId: this.getUseAddress.ID,
                postType: 0,
                payWay: e.PaymentPayWay,
                id: this.proData.activityId,
            }
            uni.showLoading({
                title: "提交中",
            })
            CreateAddupActivityAction(param).then((res) => {
                if (res.State == 1) {
                    //埋点
                    let tackData = {
                        id: res.Data.ID,
                        orderPrice: res.Data.payPrice,
                    }
                    this.tackSubmitOrder(tackData)

                    //支付
                    if (param.payWay == 1 || param.payWay == 10) {
                        //余额支付
                        this.payApi(res.Data, param)
                    } else if (param.payWay == 0) {
                        uni.hideLoading()
                        this.easyRemoveCurrentGoTo("/pages_shop/packet/order/waitPay?orderId=" + res.Data.OrderId)
                    }
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        payApi(data, paramData) {
            let shop = storage.getCache("webInfo")
            let param = {
                businessId: shop.BusinessId,
                orderId: data.OrderId,
                opUserId: data.UserId,
                payWay: paramData.payWay,
                payType: 4,
                payAccountType: 0,
            }
            offlinePay(param).then((res) => {
                uni.hideLoading()
                if (res.State == 1) {
                    //更新用户余额
                    getUserInfo().then((res) => {})
                    //跳转到支付结果
                    this.easyReLaunch("/pages_shop/packet/order/payResult?orderId=" + data.OrderId)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
    },
}
</script>

<style lang="scss">
.order-item {
    background: $color-white;
    margin-bottom: 20rpx;
}

.product-item {
    padding: $app-page-padding;
    border-radius: 16rpx;
    .title-text {
        display: flex;
        font-weight: 700;
        margin-bottom: 32rpx;
    }
}

.container {
    padding-left: $app-page-padding;
    padding-right: $app-page-padding;
    padding-top: $app-page-padding;

    .delivery-mode {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-bottom: 20rpx;

        .delivery-mode-header {
            display: flex;
            flex-direction: row;
            height: 90rpx;
            border-bottom: solid 1rpx $color-gray-4;
            padding: 0 $app-page-padding;
            align-items: center;

            .radio-box {
                display: flex;
                flex: 1;
                flex-direction: row;
                justify-content: flex-end;

                .radio-item {
                    height: 90rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 10rpx;
                }

                .current {
                    position: relative;

                    &:after {
                        content: "";
                        position: absolute;
                        bottom: 0rpx;
                        left: 50%;
                        border-width: 0 14rpx 14rpx;
                        border-style: solid;
                        border-color: transparent transparent $color-gray-4;
                    }
                }
            }
        }

        .delivery-mode-main {
            display: flex;
            flex-direction: row;
            padding: $app-page-padding;
            border-radius: 0 0 16rpx 16rpx;
            background: $color-white;

            .location-icon {
                width: 44rpx;
                height: 44rpx;
                border-radius: 40rpx;
                margin-right: 20rpx;
                background: $app-color-main;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 5rpx;
            }

            .info {
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: center;

                .info-name {
                    margin-bottom: 12rpx;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    text {
                        font-size: $font-size-32;
                        color: $color-black;
                        font-weight: 700;
                    }

                    .info-name-label {
                        color: $app-color-text-tip;
                    }
                }

                .location {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-bottom: 10rpx;

                    .location-text {
                        align-items: center;
                        display: flex;
                        flex: 1;
                        color: $app-color-text-desc;
                        line-height: 38rpx;
                        margin-right: 20rpx;
                        font-size: $font-size-24;
                        margin-bottom: 0;
                    }
                }

                .add-location {
                    margin: 12rpx 64rpx;
                    display: flex;
                    height: 72rpx;
                    align-items: center;
                    justify-content: center;
                    border: 4rpx dashed #dbdcdb;

                    text {
                        color: $app-color-text-desc;
                        font-size: $font-size-28;
                    }
                }
            }
        }
    }
}

.msg-item {
    padding: $app-page-padding;
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;
    .msg-input {
        display: flex;
        margin-top: $app-page-padding;
        display: flex;
        height: 150rpx;
        background: #f7f7f7;
        border-radius: $border-radius-10;
        padding: 10rpx;
        width: calc(100% - 20rpx);
    }
}

.tab {
    display: flex;
    flex-direction: row;
    height: 76rpx;
    position: relative;

    .tab-item {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;

        text {
            color: #4d4d4d;
        }

        position: relative;
        z-index: 1;
    }

    .bg {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70rpx;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 16rpx 16rpx 0 0;
    }

    .current {
        text {
            height: 76rpx;
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
            background: $color-white;
            border-radius: 16rpx 16rpx 0 0;
            color: $app-color-main;
            font-weight: 700;
            font-size: $font-size-32;
            position: relative;
            z-index: 0;
        }
    }

    .tab-bg-left {
        width: 56rpx;
        height: 76rpx;
        position: absolute;
        right: -32rpx;
        bottom: 0;
        z-index: 10;
    }

    .tab-bg-right {
        width: 58rpx;
        height: 76rpx;
        position: absolute;
        left: -32rpx;
        bottom: 0;
    }
}

.tab-mark {
    height: 16rpx;
    border-radius: 16rpx 16rpx 0 0;
    background: $color-white;
}

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300rpx;
    background: linear-gradient(180deg, $app-color-main 0%, rgba(0, 140, 59, 0) 100%);
    z-index: 0;
}

.main {
    position: relative;
    z-index: 1;
}
.order-item-main {
    display: flex;
    flex: 1;
    flex-direction: row;
}
.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    .img-item {
        position: relative;
        margin-right: 24rpx;

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            // border: 1px solid $app-color-main;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}
.right-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    .num-box {
        display: flex;
        flex-direction: column;
        margin-right: 16rpx;
        text {
            margin-bottom: 4rpx;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
.pop-pro-list {
    background: $color-white;
    padding-bottom: 40rpx;
    border-radius: 24rpx 24rpx 0 0;
    height: 70vh;
    .pop-header {
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        border-radius: 24rpx 24rpx 0 0;
        border-bottom: solid 20rpx #f1f1f1;
        .icon-close {
            position: absolute;
            right: 24rpx;
        }
        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }
    .scroll {
        height: 100%;
    }
}
.coupon-item {
    display: flex;
    flex-direction: column;
    padding: $app-page-padding;
    border-radius: 16rpx;
    .coupon-item-main {
        display: flex;
        flex-direction: row;
        align-items: center;
        .icon-coupon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }
        .icon-coupon-name {
            flex: 1;
        }
        .no-use-coupon {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }
        .use-coupon {
            color: $color-orange-1;
            font-size: $font-size-24;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 60%;
        }
        .icon-right {
            margin-left: 8rpx;
        }
    }
    .coupon-item-desc {
        text {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }
    }
}

.pro-list-item {
    display: flex;
    flex-direction: row;
    .pro-image {
        width: 144rpx;
        height: 144rpx;
        border-radius: 8rpx;
        margin-right: $app-page-padding;
    }
    .pro-info {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        .pro-info-name {
            font-size: $font-size-28;
            font-weight: 700;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }
        .pro-info-price {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            text {
                color: $color-orange-1;
                margin-bottom: 8rpx;
            }
            .small {
                font-size: $font-size-20;
                margin-bottom: 10rpx;
            }
            .price-text {
                display: flex;
                font-size: $font-size-36;
                flex: 1;
            }
            .btn {
                border-radius: 100rpx;
            }
        }
    }
}
</style>
